<template>
  <div class="loginOuter">
    <input type="text" id="userName" v-model="userName" placeholder="请输入用户名">
    <button class="btn" @click="enterAChatRoom">进入聊天室</button>
  </div>
</template>
 
<script setup lang='ts'>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter()

const userName = ref<string>('')  // 用户名

// 进入聊天室
const enterAChatRoom = (): void => {
  if (userName.value === '') {
    return alert("用户名不可为空")
  } else {
    localStorage.setItem('token', userName.value.trim())
    console.log('进入成功!')
    router.push('/')
  }
}
</script>
 
<style lang='scss' scoped>
.loginOuter {
  width: 50%;
  padding: 20px;
  margin: 0 auto;
  margin-top: 100px;
  background-color: aquamarine;
  border-radius: 10px;
  box-shadow: 0 0 5px 2px rgba(223, 223, 223, 0.8);

  #userName {
    width: 200px;
    height: 30px;
    padding: 3px 0 3px 5px;
    border: none;
    outline: none;
    background-color: rgba(255, 255, 255, .99);
  }

  .btn {
    margin-left: 10px;
    height: 30px;
    padding: 5px;
    font-size: 12px;
    border: none;
    outline: none;
    color: #464646;
    border: 2px solid rgba(70, 70, 70, .2);
  }

}
</style>